<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
</head>
<body>
    <!-- 
        需求：自定义一个指令：v-big用于将n的值放大10倍
        1.
     -->
    <div id="root">
        <h2 v-once>n的初始值是：{{ n }}</h2>
        <h2>当前n的值是：{{ n }}</h2>
        <!-- <h2 v-big="n">放大10倍后n的值是：{{ n }}</h2> -->
        <!-- 上面那样写的话，会把h2里面的所有内容替换掉 -->
        <h2 >放大10倍后n的值是：<span v-big="n"></span> </h2>
        <button @click="n++">点我n+1</button>
    </div>

    <script>
        Vue.config.productionTip = false;
        Vue.config.devtools = true;

        new Vue({
            el: "#root",
            data: {
                n: 1,
                str: 'hello'
            },
            // 自定义指令，可以在里面定义多个自定义的指令
            directives: {
                // 定义指令的时候，前面不需要写v-，在使用的时候要写v-
                // big函数什么时候调用？
                // 1.当指令与元素初次绑定成功时（一上来）
                // 2.指令所在的模板被重新解析时，即data中只要有一个数据发生变化时
                // element是绑定的那个元素，binding是一个对象，里面有很多属性，我们要用的是value属性
                // bindi.value就是和该自定义指令绑定的值
                big(element, binding) {
                    console.log('big指令被调用了');
                    console.log(binding);
                    element.innerText = binding.value * 10;
                }
            }
        })
    </script>
</body>
</html>